<template>
  <div class="header">
    <el-row :gutter="20">
      <el-col :span="16"><div class="grid-content ep-bg-purple" />
        <div class="leftHeader">
          标题
        </div>
      </el-col>
      <el-col :span="8"><div class="grid-content ep-bg-purple" />
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#9a8791"
            text-color="#fff"
            active-text-color="#ffd04b"
            @select="handleSelect"
        >
          <el-menu-item index="1">
            <img src="../assets/icon_home/shouye.png" alt="首页图标">首页
          </el-menu-item>
          <el-menu-item index="2">
            <img src="../assets/icon_home/sousuo.png" alt="搜索图标">搜索
          </el-menu-item>
          <el-menu-item index="3">
            <img src="../assets/icon_home/yingyong.png" alt="分类图标">分类
          </el-menu-item>
          <el-menu-item index="4">
            <img src="../assets/icon_home/biaoqian.png" alt="标签图标">标签
          </el-menu-item>
          <el-menu-item index="5">
            <img src="../assets/icon_home/zhanghu.png" alt="账户图标">账户
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>

  <div class="article">
    <el-card class="box-card">
      <div class="text item">
        <span>{{message}}</span>
      </div>
      <Button @click="acceptMsg()">btn</Button>
    </el-card>
  </div>

  <div class="comment-module">
    <span>评论:</span><br/>
    <div class="field">
      <textarea name="comment" placeholder="请输入评论信息..."></textarea>
    </div>
    <div class="submitComment">
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Create</el-button>
      </el-form-item>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {LocationQueryValue, useRoute} from "vue-router";
const route=useRoute();

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

let message: string | null | LocationQueryValue[] =""
//form表单显示要修改用户的信息
function acceptMsg() {
//获取ManagerDemo.vue界面传递的参数
  message = route.query.info;
  console.log(message)
}
</script>

<style scoped>
.header{
  background: #9a8791;
}

.leftHeader{
  float: left;
  width: 100px;
  text-align: center;
  color: #ffffff;
  padding-top: 20px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
//width: 480px;
  margin-top: 30px;
}

.article{
  width: 800px;
  margin: 0 auto;
}

.comment-module{
  padding-top: 20px;
  width: 800px;
  margin: 0 auto;
}

.comment-module span{
  font-size: 20px;
}

.field{
  width: 600px;
  height: 80px;
  padding-top: 5px;
  text-align: center;
}

.field textarea{
  min-width: 600px;
  max-width: 600px;
  height: 80px;
  width: 600px;
}

.submitComment{
  width: 100px;
  height: 80px;
  float: left;
}
</style>
<script setup>
</script>